import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Timeline, Divider } from 'antd';
// import Ymap from './map/Ymap';
import Map from './map/Map';
import '../../style/Areao.scss'
import jsonData from './map/yiqing.json'//https://c.m.163.com/ug/api/wuhan/app/index/feiyan-data-list
import { useState } from 'react';
import { useEffect } from 'react';
import { add } from '../../utils/api2';
import banner from '../../assets/banner.webp'
console.log(jsonData.data.areaTree[2].children)

function Areaofrisk(props) {
    // 定义一个新的对象来接收城市的疫情数据
    let provincesObj = {};
    //获取数据，并通过map选择数据，用一个新的对象进行接收
    jsonData.data.areaTree[2].children.map((item) => {
        provincesObj[item.name] = {
            "value": item.total.confirm,
            "heal": item.total.heal,
            "dead": item.total.dead,
        }
    })
    console.log(provincesObj)
    // 定义一个数组用来转json对象，并存储
    let proviceList = []
    // 通过for..in进行将对象的每一项push到数组中
    for (const key in provincesObj) {
        provincesObj[key].name = key
        proviceList.push(provincesObj[key])
    }
    console.log(proviceList)
    // 用于接收确诊总人数
    let confirm = null
    // 用于接收治愈总人数
    let heal = null
    // 用于接收死亡总人数
    let dead = null
    proviceList.forEach((item, index) => {
        confirm += item.value
        heal += item.heal
        dead += item.dead
    })
    console.log(confirm)
    // 设置每一列的数据
    const columns = [
        {
            title: '地区',
            dataIndex: 'name',
        },
        {
            title: '确诊',
            dataIndex: 'value',
        },
        {
            title: '死亡',
            dataIndex: 'dead',
        },
        {
            title: '治愈',
            dataIndex: 'heal',
        },
    ];
    // 设置每一行的数据
    const data = proviceList
    const [datalist, setDatalist] = useState([])
    // 在钩子函数中连接接口获取疫情公告数据
    useEffect(() => {
        add().then((res) => {
            setDatalist(res.data)
        })
    }, [])
    console.log(datalist)
    return (
        <div className='areaofrisk'>
            {/* 地图组件 */}
            {/* <Ymap /> */}
            <div className="maptop">
                <div className="chinamap">
                    <Divider orientation="center">新冠肺炎实时疫情数据--统计截止时间:2022-11-29 19:28</Divider>
                    <div className="datalist">
                        <span>确诊 {confirm}</span>
                        <span>治愈 {heal}</span>
                        <span>死亡 {dead}</span>
                    </div>
                    <Map data={data} />
                </div>
                <div className="tonggao">
                    <img src={banner} alt="" style={{ width: '420px', height: '200px' }} />
                    <div className="timeline">
                        <Timeline>
                            {
                                datalist.map((item, index) => {
                                    return (<Timeline.Item key={index}>
                                        <h3>{item.time}</h3>
                                        <p className='title'><span>标题</span>{item.name}</p>
                                        <p className='context'><span>内容</span>{item.context}</p>
                                        <p className='people'><span>发布者</span>{item.people}</p>
                                    </Timeline.Item>)
                                })
                            }
                        </Timeline>
                    </div>

                </div>
            </div>
            {/* 设置表格，使用获取的疫情数据渲染页面 */}
            <Table
                columns={columns}
                // pagination={pagination}
                dataSource={data}
            // onChange={handpagination}
            />
        </div>
    );
}
export default Areaofrisk;